<template>
    <div class="common courseAdd">
        <innerCommon 
            :location="location"
        >
            <div slot="right" class="top">
                <a-button class="returnBack" type="primary" @click="returnBack()">返回</a-button>
            </div>
            <div slot="table" class="tableWrap">
                <eform
                    :formData="formData"
                    ref="form"
                    :fields="fields"
                    v-if="fields||type==0"
                >
                    <div slot="activeType">
                        <a-select 
                            :disabled="type==1"
                            @change="changeActiveType" 
                            v-decorator="['type',{rules: [{ required: true, message: '请选择活动类型' }]}]"
                            :allowClear="true" 
                            placeholder="活动类型">
                            <a-select-option 
                                :value="item.value" 
                                v-for="(item,index) in activeTypeList" 
                                :key="index">
                                {{item.name}}
                            </a-select-option>
                        </a-select>
                    </div>
                    <div slot="prefix">
                        <a-cascader  
                           :disabled="type==1"
                           placeholder="证书规则"
                           :options="options"
                           change-on-select
                           @change="onChange"
                           v-decorator="['certNumPrefix',{rules: [{ required: true, message: '请选择证书规则' }]}]"
                           :initialValue="certRuleInput" 
                           >
                           </a-cascader>
                        <!-- <a-select 
                            :disabled="type==1"
                            @change="changeCertRule" 
                            v-decorator="['certNumPrefix',{rules: [{ required: true, message: '请选择证书规则' }]}]"
                            :allowClear="true" 
                            placeholder="证书规则">
                            <a-select-option 
                                :value="item.prefix" 
                                v-for="(item,index) in certRuleList" 
                                :key="index">
                                {{item.title}}
                            </a-select-option>
                        </a-select> -->
                    </div>
                    <div slot="activeTime">
                        <rangeTime 
                            :isShowDisabled="false"
                            @getTimes="getExamTimes"
                            :defaultTime="defaultExamTime"
                            v-decorator="['activeTime',{rules: [{ required: true, message: '请选择活动时间' }]}]"
                        ></rangeTime>
                    </div>
                    <div slot="joinTime">
                        <rangeTime
                            :isShowDisabled="false"
                            @getTimes="getJoinTime"
                            :defaultTime="defaultJoinTime"
                            v-decorator="['joinTime',{rules: [{ required: true, message: '请选择报名时间' }]}]"
                        ></rangeTime>
                    </div>
                    <div slot="examIntroduction">
                        <eQuill
                            class="examineeQuill"
                            @getQuillContent="getQuillContent"
                            v-decorator="['info',{rules: [{ required: true, message: '请输入内容' }]}]"
                            :defaultData="quillInfo"
                        ></eQuill>
                    </div>
                    <div slot="attachFile">
                        <a-tag v-for="(item,index) in fileList" :key="index">
                            {{item.filename}}<a-icon type="close" @click="deleteFile(index)" />
                        </a-tag>
                        <uploadFile 
                            name="上传附件"
                            @returnFileUrl="returnFileUrl"
                        ></uploadFile>
                    </div>
                </eform>
                <div class="submitBtn">
                    <a-button @click="returnBack()">取消</a-button>
                    <a-button type="primary" @click="save()">保存</a-button>
                </div>
            </div>
        </innerCommon>
    </div>
</template>
<script>
import {addOnePlusActiveApi,updateOnePlusActiveApi,getActiveDetailApi,getCertRuleApi} from "@/request/api"
import rangeTime from '@/components/common/rangeTime'
import eQuill from '@/components/common/eQuill'
import eform from "@/components/common/form"
import innerCommon from "@/components/common/innerCommon"
import uploadFile from "@/components/common/uploadFile"
import moment from "moment"
import certRuleList from "@/units/certRuleList";
export default {
    name:'examinationAdd',
    components:{eform,rangeTime,eQuill,innerCommon,uploadFile},
    created(){
        this.options=certRuleList
        this.trainingId=this.$route.query.data
        // this.getCertRule()
        if(this.trainingId){
            this.type=1
            this.editInit()
        }else{
            this.type=0
        }
        this.location=[
            {name:'1+X管理',path:''},{name:'考务管理',path:'/examineeManage'},{name:this.type==0?'新增':'修改',path:''}
        ]
    },
    data(){
        let validateExamineeName=(rule,value,callback)=>{
            if(value){
                if(value.trim().length === 0){
                    callback(new Error('考试名称不能全是空格'))
                }else{
                    callback()
                }
            }else{
                callback()
            }
        }
        const formData=[
            {
                label:"活动类型",
                scopedSlots: { customRender: 'activeType'},
            },{
                label:"证书规则",
                scopedSlots: { customRender: 'prefix'},
            },{
                label:"活动名称",
                prop:"title",
                placeholder:'请输入活动名称',
                rules:[{required:true,message:'请输入活动名称'},{validator:validateExamineeName}],
            },{
                label:"报名时间",
                scopedSlots: { customRender: 'activeTime'},
            },{
                label:"培训时间",
                scopedSlots: { customRender: 'joinTime'},
            },{
                label:"活动内容",
                scopedSlots: { customRender: 'examIntroduction'},
            },{
                label:"附件",
                scopedSlots: { customRender: 'attachFile'},
            }
        ]
        return{
            fields:null,
            activeTypeList:[{'name':'考核培训','value':1},{'name':'师资培训','value':2},{'name':'考务人员培训','value':3}],
            formData,
            location:[],
            quillInfo:'',
            format:'YYYY-MM-DD HH:mm:ss',
            defaultExamTime:null,
            defaultJoinTime:null,
            type:0,//0是新增 1是修改
            trainingId:'',
            fileList:[],
            options:null,
            certRule:{
                 title:"",
                 certType:null,
                 level:null,
            },
            prefix:"",
            certRuleInput:[],
            
        }
    },
    methods:{
        editInit(){
            this.getToken(getActiveDetailApi,{trainingId:this.trainingId},res=>{
                let info=res.data
                this.certRuleInput.push(res.data.certTitle,res.data.certType,res.data.level)
                this.fields={
                    ...res.data,
                    'activeTime':{'start':info.startTime,'end':info.endTime},
                    'joinTime':{'start':info.activityStart,'end':info.activityEnd},
                    'certNumPrefix':this.certRuleInput
                }
                // console.log("certNum:",this.certRuleInput);
                this.defaultExamTime={'start':moment(res.data.startTime),'end':moment(res.data.endTime)}
                this.defaultJoinTime={'start':moment(res.data.activityStart&&res.data.activityStart),'end':moment(res.data.activityEnd)}
                this.quillInfo=res.data.info,
                this.fileList=res.data.attachFile||[]
            })
        },
        moment,
        getCertRule(){
            this.getToken(getCertRuleApi,this.certRule,res=>{
                this.prefix=res.data.prefix
            })
        },
        //证书规则
        onChange(data){
            this.certRule.title=data[0]
            this.certRule.certType=data[1]
            this.certRule.level=data[2]  
            if(this.certRule.title==="结业证书"||this.certRule.level){
                this.getCertRule()
            }
        },
        returnBack(){
            this.$router.go(-1)
        },
        getExamTimes(start,end){
            this.$refs.form.form.setFieldsValue({['activeTime']:{start,end}})
        },
        getJoinTime(start,end){
            this.$refs.form.form.setFieldsValue({['joinTime']:{start,end}})
        },
        getQuillContent(data){
            this.$refs.form.form.setFieldsValue({['info']:data})
        },
        returnFileUrl(data){
            data.data.docUrl.forEach(item=>{
                this.fileList.push(item)
            })
        },
        deleteFile(data){
            this.fileList.splice(data,1)
        },
        changeActiveType(data){
            this.$refs.form.form.setFieldsValue({['type']:data})
        },
        // changeCertRule(data){
        //     console.log(data)
        // },
        // 添加考务
        save(){
            this.$refs.form.form.validateFields().then(res=>{
                let formData={
                    ...res,
                    'startTime':moment(res.activeTime.start).format(this.format),
                    'endTime':moment(res.activeTime.end).format(this.format),
                    'activityStart':moment(res.joinTime.start).format(this.format),
                    'activityEnd':moment(res.joinTime.end).format(this.format),
                    'attachFile':this.fileList.length==0?null:this.fileList,
                    'certNumPrefix':this.prefix
                }
                let api
                if(this.type==0){
                    api=addOnePlusActiveApi
                }else{
                    api=updateOnePlusActiveApi
                    formData={...formData,'trainingId':this.trainingId}
                }
                this.getToken(api,formData,res=>{
                    this.$message.success(res.message)
                    this.returnBack()
                })
            })
        },
    }
}
</script>